<template>
  <div
    class="ticker__chiclet j-ticker__chiclet quote-tip bgDeferredQuote pos__below"
  >
    <a class="chiclet__name"></a>
    <div class="chiclet__thirdparty"></div>
    <div class="chiclet__intraday">
      <div class="price">
        <bg-quote field="last" prefix="$">$4.6400</bg-quote>
      </div>
      <div class="change u-flex">
        <div class="point chiclet__thirdparty-link negative">
          <bg-quote class="chiclet-change-value">-0.8400</bg-quote>
        </div>
        <div class="percentage chiclet__thirdparty-link negative">
          (<bg-quote class="chiclet-change-percent">-15.33%</bg-quote>)
        </div>
      </div>
    </div>
    <div class="chiclet__data u-flex">
      <div class="list__item chiclet-open">
        <div class="item__cell">Open</div>
        <div class="item__cell chiclet-open-value">$5.0500</div>
      </div>
      <div class="list__item chiclet-volume">
        <div class="item__cell">Volume</div>
        <div class="item__cell chiclet-volume-value">
          <bg-quote> 129.5M </bg-quote>
        </div>
      </div>
      <div class="list__item chiclet-peratio">
        <div class="item__cell">P/E Ratio</div>
        <div class="item__cell chiclet-peratio-value">N/A</div>
      </div>
      <div class="list__item chiclet-yield">
        <div class="item__cell">Div Yield</div>
        <div class="item__cell chiclet-yield-value">0.00%</div>
      </div>
      <div class="list__item chiclet-marketcap">
        <div class="item__cell">Market Cap</div>
        <div class="item__cell chiclet-marketcap-value">$1.62B</div>
      </div>
    </div>
    <div class="chiclet__range item-field item-date-range range__bar">
      <div class="range__data labels">
        <span class="low range__left">4.6200</span
        ><span class="high range__right">5.3000</span>
      </div>
      <div class="range__chart">
        <div
          class="current"
          style="left: 2.9411764705881738%"
          title="4.6400"
        ></div>
      </div>
    </div>
    <div class="chiclet__ad">
      <a class="btn btn--outline">See Full Quote</a>
    </div>
  </div>
  
</template>
<script setup>
const props = defineProps(["hoverData"]);
</script>
<style scoped lang="scss">
.ticker__chiclet {
  color: #202020;
}

.range__bar {
  display: block;
}

.ticker__chiclet:before {
  content: "";
  width: 100%;
  left: 0;
  bottom: 100%;
  height: 12px;
  position: absolute;
}

.ticker__chiclet:after {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 0;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #c3c3c3;
}

.ticker__chiclet.pos__above {
  top: auto;
}

.ticker__chiclet.pos__above:before {
  bottom: auto;
  top: 100%;
}

.ticker__chiclet.pos__above:after {
  bottom: auto;
  top: calc(100% + 1px);
  border-top: 8px solid #c3c3c3;
  border-right: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.ticker__chiclet.pos__left {
  left: auto;
}

.ticker__chiclet.pos__left:after {
  left: auto;
  right: 0;
  border-right: none;
  border-top: 8px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 8px solid #c3c3c3;
}

.ticker__chiclet.pos__left.pos__above:after {
  border-top: 8px solid #c3c3c3;
  border-bottom: 8px solid transparent;
}

.group.group--tickers:hover .ticker__chiclet {
  display: block;
}

.ticker__chiclet .chiclet__name {
  font-size: 0.9rem;
  padding-bottom: 8px;
}

.chiclet__data {
  color: #2e2e2e;
}
</style>
